import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from "lodash"
import DailyBill from './components/Daybill/index.jsx'

const Month = () => {
    // 按月做数据的分组
    const billList = useSelector(state => state.bill.billList)
    const monthGroup = useMemo(() => {
        // return 出去计算机后面的值
        return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY-MM') )
        // 将数据分组
    },[billList])
    console.log(monthGroup);
    
    
    // 控制弹窗打开和关闭
    const [ dateVisible , setDateVisible ] = useState(false)
    // 控制时间显示
    const [ currentDate , setCurrentDate ] = useState(() => {
        return dayjs(new Date()).format('YYYY-MM')
        // 使用函数的放式使得调用的时候只会创建一个实例
    })
    const [ currentMonthList , setMonthList ] = useState([])
    const monthResult = useMemo(() => {
      // 支出 收入 剩余
      const pay = currentMonthList.filter(item => item.type === "pay").reduce((a,c) => a + c.money,0)
      const income = currentMonthList.filter(item => item.type === "income").reduce((a,c) => a + c.money,0)
      return{
        pay,
        income,
        total: pay + income
      }
    },[currentMonthList])
    // 确认回调 
    // setMonthList(monthGroup[formatDate]  ||  [])   这样设置初始化为空
    const onConfirm = (date) => {
        setDateVisible(false)
        const formatDate = dayjs(date).format('YYYY-MM')
        // 设置formatDate 变量用来储存 格式化后的时间 并将格式化后的时间传给时间显示 再由时间显示传给时间显示
        setMonthList(monthGroup[formatDate]  ||  [])
        // 一旦确认后将formatDate返回到monthGroup函数中进行数据分组
        // 将分组好的数据进行遍历与累加,并存入到monthList中
        setCurrentDate(formatDate); 
    }
    // 当前月按照日来分组
    const dayGroup = useMemo(() => {
      // return 出去计算机后面的值
      const groupData = _.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
      // 调用原生的Object.keys()方法便可以将所有的键值提取出来
      const keys = Object.keys(groupData)
      return {
        groupData,
        keys
      }
      // 将数据分组
  },[currentMonthList])





  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text">
              {currentDate + "月账单"}
            </span>
            {/* 根据弹窗状态控制类名 */}
            <span className={classNames('arrow', dateVisible && 'expand') }></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{monthResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateVisible}
            max={new Date()}
            // 设置取消按钮
            onCancel={() => setDateVisible(false)}
            onConfirm={onConfirm}
            onClose={() => setDateVisible(false)}
          />
        </div>
        {/* 单日列表统计 */}
        {
          dayGroup.keys.map(key => {
            return <DailyBill key={key} date = {key} billList={dayGroup.groupData[key]}></DailyBill>
          })
        }
      </div>
    </div >
  )
}

export default Month